<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/list.css">
</head>
<body>
    <!-- 头部 -->
    <div id="header">
        <div class="header-wrap header-list">
            <h1><img src="./images/fila_blue_150.png" alt="" class="dom_center"></h1>
            <div class="header-right">
                <input type="text" placeholder="短袖"><button>搜索</button>
                <a href="" class="enter">登入</a>
                <a href="" class="login">注册</a>
                <a href="" class="shop_cart"><img src="./images/cart-blue.png" alt=""></a>
            </div>
        </div>
    </div>
    <!-- 导航 -->
    <div class="con-nav">
        <ul class="nav">
            <h4><a href="#">秋季新品</a></h4>
            <li class="navList"><a href="#">女士</a></li>
            <ol class="show">
                <li><a href="">T恤上衣</a></li>
                <li><a href="">POLO衫</a></li>
                <li><a href="">卫衣</a></li>
                <li><a href="">外套</a></li>
                <li><a href="">连衣裙</a></li>
                <li><a href="">包包配饰</a></li>
                <li><a href="">运动鞋</a></li>
            </ol>
            <li class="navList"><a href="#">男士</a></li>
            <ol class="show">
                <li><a href="">T恤上衣</a></li>
                <li><a href="">POLO衫</a></li>
                <li><a href="">卫衣</a></li>
                <li><a href="">外套</a></li>
                <li><a href="">连衣裙</a></li>
                <li><a href="">包包配饰</a></li>
                <li><a href="">运动鞋</a></li>
            </ol>
            <li class="navList"><a href="#">儿童</a></li>
            <ol class="show">
                <li><a href="">T恤上衣</a></li>
                <li><a href="">POLO衫</a></li>
                <li><a href="">卫衣</a></li>
                <li><a href="">外套</a></li>
                <li><a href="">连衣裙</a></li>
                <li><a href="">包包配饰</a></li>
                <li><a href="">运动鞋</a></li>
            </ol>
            <h4 class="fuslou"><a href="#"> FUSLOU </a></h4>
        </ul>
        <p class="hepl">帮助中心</p>
        <p class="serve">+购物服务</p>
        <p class="fila">+关于FILA</p>
    </div>
    <!-- 内容 -->
    <div class="list-wrap">
        <h4 class="float_left">所有商品()</h4>
        <div class="float_right matching">
            <p class="result">匹配结果()</p>
            <p>筛选</p>
            <p class="newSort">新品排序
            <div class="sort">
                <span>新品排序</span>
                <span>销量排序</span>
                <span>由高到底</span>
                <span>由低到高</span>
            </div>
            </p>
        </div>
        <div class="list_b">
                <dl id="template" class="dl">
                    <a href="/details.html">
                        <dd><img src="" alt=""></dd>
                        <dt>
                            <p class="name"></p>
                            <p>￥<span class="money"></span></p>
                        </dt>
                    </a>
                </dl>
        </div>
    </div>
     <!-- 底部 -->
     <div id="foot">
        <div class="foot-wrap">
            <ul class="float_left">
                <li><a href="">购物服务</a></li>
                <li><a href="">关于品牌</a></li>
                <li><a href="">查找门店</a></li>
                <li>关注FLIA官方媒体:
                    <a href="" class="microblog"></a>
                    <a href="" class="WeChat"></a>
                </li>
                <li>售后服务电话：400-886-7699</li>
            </ul>
            <div class="foot_right float_right">
                <p>©FILA体育 闽ICP备11020421号-8 闽公网安备35020302033807号</p>
                <p>©2020 FILA Luxembourg S.à.r.l. - All Rights Reserved -</p>
            </div>
        </div>
    </div>
    <div class="service">
        <a href="">客服</a>
    </div>
    <script src="./js/public.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script>
        $(function () {
            $(".newSort").click(function () {
                $(".sort").toggle()
            })
            // 内容
            $.ajax({
                url:"http://127.0.0.1:81/getAllgoods",
                success:function(data){
                    var data = JSON.parse(data)
                    data.forEach(item => {
                        // console.log(item.length)
                        // console.log(item)
                        let dl = $(".dl")
                        let template = $("#template")
                        let newDl = template.clone(true)
                        $(".list_b").append(newDl)
                        newDl.attr("id" ,"")
                        newDl.find("img").attr("src",`./images/${item.src}`)
                        newDl.find(".name").html(item.name)
                        newDl.find("a").attr("href",`details.html?id=${item.id}`)
                        newDl.find(".money").html(`${item.price}.00`)
                        $(".list-wrap h4").html(`所有商品(12)`)
                        $(".result").html(`匹配结果(12)`)
                    });
                }
            })
        })
    </script>
</body>

</html>